<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>属性</title>
    <script>
    window.onload = function (){

        //属性添加  . 或者  ['name']
        var obj = {};
        obj.name = 'Hanley';
        obj['age'] = 20;
        console.log(obj.name);
        console.log(obj['age'])
        
        //obj['age] 与 obj.age 区别
        //.是取自身的属性  []可以是变量
        var obj2 = {};
        obj2.name = 'Rose';
        var a = 'name';
        console.log(obj2[a]); // 相当于 obj2['name'],所以打印出 Rose

        //属性删除 delete
        var obj3 = {};
        obj3.name='Hanley';
        obj3.age = 18;
        obj3.state = false;
        delete obj3.name;//删除 对象的属性，等于 delete obj3['name']
        console.log(obj3);

        //判断是否包含属性
        //in 运算符
        var obj4 = {
            name:'Hanley',
            age:20
        }
        console.log('name' in obj4);//检测obj4中是否包含 name 属性
        // hasOwnProperty() 方法
        console.log(obj4.hasOwnProperty('name'));

        //!=undefinded 的值判断
        console.log(obj4.name === undefined);//name不存在 以及 name的值为undefinded 都会true

        //拓展知识点 = == === != !==
        //=表示赋值
        //== 表示比较/判断 值是否相等  0=='0' true
        //=== 全等（类型匹配） 0 === ‘0’     false

        //枚举属性
        //for in 
        var arr = ['a','b','c','d'];
        var o = {name:'hanley',age:20};
        for(v in o){ //for(属性 in 对象)
            console.log(v);//得到的对象中属性的名字
            console.log(o[v]);//得到对象中属性的值,v是变量 ，真正的值 o['name']
            //console.log(o.v);无法取值,因为v是变量 ,真正的值为 o.'name'
        }

        for(v in arr){//for(属性 in 数组)
            console.log(v);//得到数组元素的下标
            console.log(arr[v]);//得到数组组的值
        }

        //forEach()-没有返回值   map()-有返回值
        var arr2 = ['a','b','c','d'];
        arr2.forEach(function(item,index){
            console.log(item);
            //return item ，不可返回!!
        });

        //map 回调中支持返回值
        arr2.map(function(item,index){
            console.log(item);
            return item;
        });

        //序列化 JSON.parse()  JSON.stringify();
        //JSON.parse()-对象字符串转为对象,相当于深拷贝
        //JSON.stringify()- 对象转换为 对象字符串
        console.log(typeof JSON.stringify(o))
        console.log(typeof o);

        //深拷贝(双胞胎)  浅拷贝(影子)
        //数组 slice(beginIndex,endIndex)-截取时不包括endIndex元素 -返回新的数组
        //concat() 合并数组， -返回新的数组
        var arr4 = ['aa','bb','cc','dd'];
        //arr4.slice(1,2);//bb
        var arryCopy = arr4.slice(0);//重新复制一个新的数组
       console.log(arr4.concat('ee','ff'));

        //对象
        var o2 = {name:'hanley',age:20};
        var oCopy = JSON.parse(JSON.stringify(o2));
        oCopy.name = 'Rose';
        console.log(oCopy);
        console.log(o2);

        //练习题
        var pArry = [{x:1,y:2,x:3},{a:3,b:4,c:5},{m:8,n:9,l:7}];
        console.log('原始数组：'+JSON.stringify(pArry));
        for(v in pArry){
            var tmp = pArry[v];
            var flg = tmp.hasOwnProperty('x');
            //var flg = 'x' in tmp;
            //var flg = tmp.x !== undefined;
            if(flg){
                console.log("第 "+v+" 个对象，含x元素->"+JSON.stringify(tmp));
            }else{
                console.log("第 "+v+" 个对象，不含x元素!!!->"+JSON.stringify(tmp));
            }
        };

        pArry.forEach(function(item,index){
            var flg = item.hasOwnProperty('x');
            if(flg){
                console.log("第 "+index+" 个对象，含x元素->"+JSON.stringify(tmp));
            }else{
                console.log("第 "+index+" 个对象，不含x元素!!!->"+JSON.stringify(tmp));
            }
        });
    }
    </script>
</head>
<body>
    
</body>
</html>